<template>
  <el-dialog
    title="ERP配方数据"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="60%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form :model="form" :rules="rules" class="formula-wrap" ref="ruleForm" label-width="170px" disabled>
      <el-row>
        <el-col :span="12">
          <el-form-item label="配方编码" prop="erpFormulaNo">
            <el-input type="text" v-model="form.erpFormulaNo" placeholder="请输入配方编码"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="配方状态" prop="erpFormulaStatus">
            <el-select
              v-model="form.erpFormulaStatus"
              placeholder="请选择配方状态"
              size="small"
              class="el-width-100"
            >
              <el-option
                v-for="item in formulaStatusOptions"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="配方所属工厂名称" prop="factoryDeptCode">
            <organizationSelect
              class="el-width-100"
              ref="orgSelect"
              v-model="form.factoryDeptCode"
              :onlyFactory="true"
            ></organizationSelect>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="配方所属业务实体名称" prop="erpOuName">
            <el-input type="text" v-model="form.erpOuName" placeholder="请输入配方所属业务实体名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input type="text" v-model="form.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品编码" prop="remark">
            <el-input type="text" v-model="form.productItem && form.productItem.erpItemCode" placeholder="请输入产品编码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品名称" prop="remark">
            <el-input type="text" v-model="form.productItem && form.productItem.erpItemName" placeholder="请输入产品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品单位" prop="remark">
            <el-input type="text" v-model="form.productItem && form.productItem.erpItemSpec" placeholder="请输入产品单位"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="物料编码" prop="remark">
            <el-input type="text" v-model="form.materialItems && form.materialItems[0].erpItemCode" placeholder="请输入物料编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料名称" prop="remark">
            <el-input type="text" v-model="form.materialItems && form.materialItems[0].erpItemName" placeholder="请输入产物料名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="物料单位" prop="remark">
            <el-input type="text" v-model="form.materialItems && form.materialItems[0].erpItemSpec" placeholder="请输入物料单位"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="物料配比" prop="remark">
            <el-input type="text" v-model="form.materialItems && form.materialItems[0].erpPackageNumber" placeholder="请输入物料配比"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {
  getErpFormula,
  addOrUpdateErpFormula} from "@/api/prodInfor/formula";
  import organizationSelect from "@/views/components/organizationSelect";
export default {
  components: { organizationSelect },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formulaStatusOptions:[
        {key:"700",label:"禁用"},
        {key:"800",label:"启用"}
      ],
      form: {
        erpFormulaNo: null,
        erpFormulaStatus: null,
        erpOwnerOrganizationId: null,
        factoryDeptCode:null,
        erpOrgName: null,
        erpOuName: null,
        remark: null,
      },
      rules: {
        erpFormulaNo: [
          { required: true, message: "请输入配方编码", trigger: "blur" },
        ],
        erpFormulaStatus: [
          { required: true, message: "请输入配方状态", trigger: "change" },
        ],
        factoryDeptCode: [
          { required: true, message: "请输入配方所属工厂名称", trigger: "change" },
        ],
        erpOuName: [
          { required: true, message: "请输入配方所属业务实体名称", trigger: "blur" },
        ]
      },
      saveloading: false
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    handleClose() {
      this.saveloading = false
      this.resetFormData()
    },

    handleOpen() {
      if (!this.row?.id) {
        this.resetFormData();
        return
      }
      getErpFormula(this.row.id)
      .then(res=>{
        if (res.code == 200 && res.data) {
          this.form = res.data;

        } else {
          this.resetFormData()
        }
      }).catch(() => {
        this.resetFormData()
      })
    },

    resetFormData() {
      this.$refs.ruleForm?.resetFields()
      this.form = {
        erpFormulaNo: null,
        erpFormulaStatus: null,
        erpOwnerOrganizationId: null,
        erpOrgName: null,
        erpOuName: null,
        remark: null
      };
    },
  },
};
</script>
<style lang="scss" scoped>
  ::v-deep .formula-wrap{
    .el-date-editor.el-input,
    .el-select {
      width: 100%;
    }
  }
</style>
